<template>
  <div class="video-preview">
    <el-dialog
      :title="'视频预览' + ' - ' + videoTitle"
      :visible.sync="dialogVisible"
      width="1000px"
      :close-on-click-modal="false"
      :lock-scroll="false"
      :append-to-body="true"
      @closed="handleClose"
    >
      <div class="video-wrap">
        <video v-if="videoSrc" :src="videoSrc" controls></video>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose()">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      videoTitle: '',
      videoSrc: '',
    }
  },
  mounted() {
    this.$bus.$on('showDialogVideoPreview', (v) => {
      let videoFormat = ['mp4', 'ogg', 'webm']
      let curVideoType = v.attrSuffixStr.toLowerCase()
      if (videoFormat.indexOf(curVideoType) == -1) {
        this.$message({
          message: '抱歉，' + curVideoType + '格式文件不支持预览',
          type: 'warning',
        })
        return
      }
      this.videoTitle = v.oldName
      this.videoSrc = v.httpUrl
      this.dialogVisible = true
    })
  },
  beforeDestroy() {
    this.$bus.$off('showDialogVideoPreview')
  },
  methods: {
    handleClose() {
      this.videoSrc = ''
      this.dialogVisible = false
    },
  },
}
</script>
<style scoped lang="scss">
.video-wrap {
  width: 100%;
  height: 600px;
  background-color: #111;
  text-align: center;
  video {
    width: 100%;
    height: 100%;
  }
}
</style>